@import "tailwindcss";

:root {
  --background: #020617;
  --foreground: #e2e8f0;
  --surface: rgba(15, 23, 42, 0.75);
  --surface-border: rgba(148, 163, 184, 0.15);
  --accent: #38bdf8;
  --danger: #f87171;
  --warning: #fbbf24;
  --success: #4ade80;
  --muted: #94a3b8;
  --shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), transparent 45%),
    radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.12), transparent 40%),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100vh;
}

.surface-panel {
  background-color: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}
